/**
 * 修改密码
 */
import React, { Dispatch, SetStateAction } from 'react';
import { Button, Modal, Form, Input } from 'antd';

const ChangePassword = (props: {
  isChangePassword: boolean;
  setIsChangePassword: Dispatch<SetStateAction<boolean>>;
}) => {
  const [form] = Form.useForm();

  const { isChangePassword, setIsChangePassword } = props;

  const handleOk = async () => {
    const values = await form.validateFields();
    console.log(values);

    setIsChangePassword(false);
  };

  const handleCancel = () => {
    setIsChangePassword(false);
  };

  return (
    <>
      <Modal
        visible={isChangePassword}
        title="修改密码"
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" onClick={handleOk}>
            确定
          </Button>,
        ]}
      >
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item
            label="旧密码"
            name="oldpsd"
            rules={[{ required: true, message: '请输入' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="新密码"
            name="newpsd"
            rules={[{ required: true, message: '请输入' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="password"
            rules={[{ required: true, message: '请输入' }]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default ChangePassword;
